import React, { useCallback, useEffect, useState } from 'react'
import style from './index.less';
import classnames from 'classnames';
import Top from '@/images/clves/shang.png'
import Bottom from '@/images/clves/xia.png'
import { Button, Modal, ModalProps, Popup } from 'antd-mobile';

import _ from 'lodash';
type Props = {
    children: React.ReactNode;
    panel?: React.ReactNode;
    footer?: React.ReactNode;
    visible?: boolean;
    onClick?: () => void;
    onReset?: () => void;
    onOk?: () => void;
    okText?: string;
    resetText?: string;
    panelType?: 'defult' | 'modal';
    excludeClassName: string;
    excludeHeight?: number;
    modalProps?: Omit<ModalProps, 'visible'>;
}
export default (props: Props) => {
    const [$visible, setVisible] = useState<boolean>(false);
    const [$top, setTop] = useState<number>(0);
    const {
        children,
        panel,
        footer,
        onClick,
        onReset,
        onOk,
        okText = '确定',
        resetText = '重置',
        panelType = 'defult',
        excludeHeight = 0,
        visible,
        excludeClassName,
        modalProps,
    } = props;
    const $onClick = useCallback(() => {
        if (_.isFunction(onClick)) {
            onClick();
        } else {
            setVisible(!$visible);
        }
    }, [onClick, $visible]);
    const $onReset = useCallback(() => {
        if (_.isFunction(onReset)) {
            onReset();
        }
    }, [onReset]);
    const $onOk = useCallback(() => {
        if (_.isFunction(onOk)) {
            onOk();
        }
    }, [onOk]);
    useEffect(() => {
        if (_.isEmpty(visible) && $visible !== visible) {
            setVisible(!!visible);
        }
    }, [visible, $visible]);
    useEffect(() => {
        const topNode = document.querySelectorAll<HTMLElement>(
            `.${excludeClassName}`,
        )[0];
        setTop(topNode.offsetHeight + excludeHeight);
    }, [visible, excludeClassName, excludeHeight]);
    
    return (
        <div className={style['action-panel-warp']}>
            <div
                className={classnames(style['action-panel-children'], {
                    [style['action-panel-children-active']]: $visible,
                })}
                onClick={$onClick}
            >
                {children}
                <img src={$visible ? Top : Bottom} alt='Icon' className={style.icon} />
            </div>
            {'defult' === panelType && panel ? (
                <div
                    style={{ top: $top }}
                    className={classnames(style['action-panel-content'], {
                        [style['action-panel-content-active']]: $visible,
                    })}
                >
                    <div className={style['action-panel']}>
                        {panel}
                        {footer || (
                            <div className={style.footer}>
                                <Button
                                    onClick={$onReset}
                                    color='success'
                                    fill='outline'
                                    className={style.resetBtn}
                                >
                                    {resetText}
                                </Button>
                                <Button onClick={$onOk}
                                    color='success'
                                    fill='solid'
                                    className={style.okBtn}
                                >
                                    {okText}
                                </Button>
                            </div>
                        )}
                    </div>
                </div>
            ) : null}
            {'modal' === panelType && panel ? (
                <Popup
                    {...modalProps}
                    visible={$visible}
                    onClose={$onClick}
                    bodyStyle={{ height: '40vh' }}
                >
                    <div className={style['action-panel']}>
                        {panel}
                        {footer || (
                            <div className={style.footer}>
                                <Button
                                    onClick={$onReset}
                                    color='success'
                                    fill='outline'
                                    className={style.resetBtn}
                                >
                                    {resetText}
                                </Button>
                                <Button
                                    onClick={$onOk}
                                    color='success'
                                    fill='solid'
                                    className={style.okBtn}
                                >
                                    {okText}
                                </Button>
                            </div>
                        )}
                    </div>
                </Popup>
            ) : null}
        </div>
    )
}
